<template>
  <div id="edit-dict-type">
    <el-form :inline="true" :model="formData" ref="formData"  :rules="validatorRules">
      <el-form-item label="名称" prop="name">
        <el-input v-model="formData.name" maxlength="20"  placeholder="请输入字典名称"></el-input>
      </el-form-item>
      <el-form-item label="code" prop="code">
        <el-input v-model="formData.code"  maxlength="20" placeholder="请输入code" :disabled="formData.id!=='' ? true :false" @focus="setDisabled($event)"></el-input>
      </el-form-item>
      <el-form-item label="类别">
        <el-radio-group v-model="formData.grade">
          <el-radio label="1">应用类</el-radio>
          <el-radio label="2">系统类</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="formData.remark" maxlength="100"  placeholder="请输入备注"></el-input>
      </el-form-item>
    </el-form>
    <div class="button-bar" >
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </div>
</template>
<script>
  export default {
    props:{
      initData:{
        type:Object,
        default:()=>{}
      },
    },
    data(){
      return{
        formData:{
          id:'',
          name:'',
          code:"",
          grade:'1',
          remark:''
        },
        validatorRules:{
          name:[
            {required: true, message: '请输入', trigger: 'change'},
          ],
          code:[
            {required: true, message: '请输入', trigger: 'change'},
          ],
        }
      }
    },
    watch:{
      initData:{
        handler(newv) {
          if(newv && newv.id){//编辑
			this.formData=Object.assign({},newv)
          }else{//新建
            for(var key in this.formData){
              this.formData[key]=""
            }
          }
        },
        deep: true
      }
    },
    methods:{
      submit(){
        var isValidate=false
        this.$refs.formData.validate((bool)=>{
            isValidate=bool
        })
        if(!isValidate){return}
        let submitData=this.formData
        submitData.moduleName="数据字典"
        this.$http.editDict(submitData)
        .then((res)=>{
            this.$message.success("操作成功!")
            this.$emit("update",'type')
            this.$emit('closeDialog',false)
        }).catch((err)=>{
          throw(err)
        })
        
      },
      cancel(){
        this.$emit('closeDialog',false)
        this.$emit("update",'type')
      },

      //持续性disabled,防止串改html
      setDisabled(event){
        var target=event.target
        if(this.formData.id!==''){
            target.disabled=true
        }
      },

      
    }
  }
</script>
<style scoped lang='scss'>
	#edit-dict-type{
		flex: 1;
		display: flex;
		flex-direction: column;
	}
  .button-bar{
    text-align: center;
    margin: 30px;
    .el-button{
      margin:0px 10px;
    }
  }

  
  /deep/ .el-form.el-form--inline{
    display: flex;
    flex-wrap: wrap;
	flex: 1;
    /deep/ .el-form-item{
      flex-basis: 40%;
      flex-grow: 1;
      margin: 10px;
    }
  }


</style>



